<template>
  <div class="vuea-box">
    <!-- <div v-for="item in microAppList" :id="item.id" :key="item"></div> -->
    <div id="vuea-container"></div>
  </div>
</template>

<script>
  import { microAppList } from '@/config'
  import { getCurrentInstance } from 'vue'
  export default defineComponent({
    name: 'Vuea',
    setup() {
      // const $pub = inject('$pub')
      const router = useRouter()
      const state = reactive({
        microAppList,
      })
      // 获取当前vue实例里面的方法
      state.instanceObj = getCurrentInstance()
      const { proxy } = state.instanceObj
      // 当前页面vue实例
      state.proxyObj = proxy
      // 需要用到的方法
      const methodObj = {
        router: router,
      }
      state.proxyObj = Object.assign(state.proxyObj, methodObj)
      // console.log(state.proxyObj, '==========state.proxyObj')

      onBeforeMount(() => {
        console.log('==========onBeforeMount')
      })
      onUnmounted(() => {
        console.log('==========onUnmounted')
      })
      onMounted(() => {
        console.log('==========onMounted')
      })
      onActivated(() => {
        console.log('==========onActivated')
        // nextTick(() => {
        //   $pub('reload-router-view')
        // })
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vuea-box {
    width: 100%;
    height: 200px;
    font-size: 30px;
  }
</style>
